<template>
  <div class="user-wrap">
    <div
      class="user-photo"
      :style="{background: `url('${datas.user ? datas.user.user_photo : ''}') center center no-repeat`,backgroundSize:'100% 100%'}"
    />
    <div class="user-content">
      <div class="user-project">
        <h1>
          {{ datas.project[0].project_name }}
        </h1>
      </div>
      <div class="user-information">
        <div class="user-name">
          {{ datas.user.user_name }}
        </div>
        <div class="user-time">
          发表于：{{ times(datas.album.created_at) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { times } from '@/utils/util'
export default {
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      times
    }
  },
  computed: {

  },
  created() {
  },
  mounted() {

  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
.user-wrap{
  width: 100%;
  height: 60px;
  margin-top: 10px;
  display: flex;
  .user-photo{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .user-content{
    margin-left: 20px;
    .user-project{
      font-size:18px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:600;
      color:rgba(51,51,51,1);
      line-height:25px;
      h1{
      font-size:18px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:600;
      color:rgba(51,51,51,1);
      line-height:25px;
      }
    }
  }
  .user-information{
    margin-top: 10px;
    display: flex;
  }
  .user-name{
    font-size:12px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:600;
    color:rgba(102,102,102,1);
    line-height:17px;
  }
  .user-time{
    font-size:11px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:16px;
    margin-left: 10px;
  }
}
</style>
